<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link href="../common/css/index.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="../common/js/jquery.min.js"></script>
<title>仁仁健康</title>
<style type="text/css">
#header{ width:100%; height:40px; background:#f8f8f8; margin:auto; border-bottom:1px #ccc solid; }
.header-box{ width:94%; height:40px; margin:auto; }
.tab-box{ width:100%;}
.tab-lt{ width:50%; height:1000px; float:left; background:#f2f2f2;}
.tab-rt{ width:50%; float:left;}
.tab-lt ul{ overflow:auto}
.tab-lt ul li{ width:70%; height:40px; line-height:40px; padding-left:30%}
.sec{ display:none}
.tab-rt ul li{ width:100%; height:40px; line-height:40px; text-align:center}
.active{ background:#fff; color:#F00}
</style>
<script>

window.onload=function(){
	
	 var oLi = document.getElementById("tab").getElementsByTagName("li");
	  var sec = document.getElementById("content").getElementsByTagName("li");

	 for( var i=0; i<oLi.length; i++){
		 oLi[i].onclick = function (){
			 for(var n = 0;n < oLi.length;n++)
                  {
                      oLi[n].className = "";
                      this.className = "active";
                  }
                      for(var n = 0;n <sec.length;n++)
                      {
                          sec[n].style.display = "none";
                          sec[this.index].style.display="block";

                      }

		 }
		 
		 }
	}



</script> 
</head>
 
<body>
<header id="header">
    <div class="header-box">
        <div style="width:20%; height:40px; float:left"><a href="../index.html"><img src="../images/back.png"></a></div>
        <div style="width:60%; height:40px; float:left; text-align:center; line-height:40px; font-size:18px;"><h4>预约挂号</h4></div>        
    </div>
    
</header>

<div class="tab-box">
   <div class="tab-lt">
      <ul id="tab">
          <li ><a href="">特色科室</a></li>
          <li class="active">内科</li>
          <li>外科</li>
          <li>骨科</li>
          <li>妇产科</li>
          <li>耳鼻喉科</li>
          <li>皮肤科</li>
          <li>眼科</li>
      </ul>
   
   </div>
   <div class="tab-rt" id="content">
        <ul  class="sec" style="display:block">
          <li>心内科</li>
          <li>耳鼻喉科</li>
          <li>呼吸科</li>
          <li>儿科</li>
          <li>胸外科</li>
          <li>发育</li>
          <li>身高</li>
         
      </ul>
      <ul  class="sec">
          <li>育儿</li>
          <<li>妇产科</li>
          <li>耳鼻喉科</li>
          <li>皮肤科</li>
          <li>儿科</li>
          <li>发育</li>
          <li>身高</li>
         
      </ul>
      <ul  class="sec">
          <li>育儿</li>
          <li>母婴</li>
          <li>发育</li>
          <li>身高</li>
          
         
      </ul>
      <ul  class="sec">
          <li>育儿</li>
          <li>母婴</li>
         
          
         
      </ul>
      <ul  class="sec">
          <li>育儿</li>
          <li>母婴</li>
          <li>发育</li>
          <li>身高</li>
          <li>育儿</li>
          <li>母婴</li>
        
         
      </ul>
      <ul  class="sec">
          <li>育儿</li>
          <li>母婴</li>
          <li>发育</li>
          
         
      </ul>
   </div>
</div>

</body>
</html>
